<template>
	<view class="main">
		<view class="musci-content" @click="changeMusic">
			<i v-if="isPalay" class="iconfont icon-music"></i>
			<i v-else class="iconfont icon-music-off"></i>
		</view>
		<view class="logo">
			<image src="/static/images/logo.png" style="width: 100%;" mode="widthFix"></image>
		</view>
		<image src="/static/images/top-bg-1.png" style="width: 100%;" mode="widthFix"></image>	
		<view class="content">
			<view class="activity-title" style="margin-top: 0;">
				<image src="/static/images/activity-1.png" style="width: 70%;"  mode="widthFix"></image>
			</view>
			<view class="activity" style="display: flex;flex-direction: column;justify-content: center;">
				<text class="rule-bg" style="font-size: 24rpx;">
					新老用户分享活动页面，当用户浏览页面时间达到15秒
				</text>
				<view style="width: 100%;text-align: center;">
					<text class="rule-bg" style="padding: 10rpx 40rpx;">
						分享者<text class="yellow" style="color: yellow;">即可获得微信现金红包</text>
					</text>
				</view>
				<view class="share">
					<view class="share-btn yellow">
						<view style="margin-top: -10rpx;" @tap="sharePoster">点击分享</view>
					</view>
				</view>
				<view class="balloon-1" style="position: absolute;left: -10rpx;bottom: -60rpx;">
					<image src="/static/images/balloon.png" style="width: 130rpx;"  mode="widthFix"></image>
				</view>
			</view>
			
			<view class="activity-title">
				<image src="/static/images/activity-2.png" style="width: 70%;" mode="widthFix"></image>
			</view>
			<view class="activity">
				<view class="coupon">
					<image @tap="getCoupon" src="/static/images/coupon_1.png" style="width: 50%;margin-right: 40rpx;" mode="widthFix"></image>
					<image @tap="getCoupon" src="/static/images/coupon_2.png" style="width: 50%;" mode="widthFix"></image>
				</view>
				
				<view class="tips">
					<text style="font-weight: bold;font-size: 28rpx;">新老用户均可参与，</text>为您的浪漫消费助力
				</view>
				<view class="balloon-2" style="position: absolute;right: -10rpx;bottom: -60rpx;">
					<image src="/static/images/balloon.png" style="width: 130rpx;"  mode="widthFix"></image>
				</view>
			</view>
			<!-- 活动三 -->
			<view class="activity-title">
				<image src="/static/images/activity-3.png" style="width: 80%;" mode="widthFix"></image>
			</view>
			<view class="activity activity-three">
				<view class="step-box">
					<view class="step-title">
						<view style="margin-top: -10rpx;">拼团福利攻略</view>
					</view>
				</view>
				<view class="tips-content">
					<view class="rule-bg" style="padding: 6rpx 40rpx;margin: 0;font-size:20rpx">邀请三名朋友成功下单，发起人即可获得<text class="yellow">免单名额</text></view>
					<view class="tips-text">*温馨提示：免单名额仅限广东省广州、深圳地区下单使用</view>
				</view>
				<view class="user">
					<view class="user-avatar">
						<image v-if="friendList[0] && friendList[0].avatar" :src="friendList[0].avatar" style="width: 100%;height: 100%;"></image>
						<uni-icons v-else type="plusempty" size="26"></uni-icons>
					</view>
					<view class="user-avatar">
						<image v-if="friendList[1] && friendList[1]?.avatar" :src="friendList[0].avatar" style="width: 100%;height: 100%;"></image>
						<uni-icons v-else type="plusempty" size="26"></uni-icons>
					</view>
					<view class="user-avatar">
						<image v-if="friendList[2] && friendList[2]?.avatar" :src="friendList[0].avatar" style="width: 100%;height: 100%;"></image>
						<uni-icons v-else type="plusempty" size="26"></uni-icons>
					</view>
				</view>
				<view class="share">
					<view class="share-btn yellow">
						<view style="margin-top: -10rpx;" @tap="sharePoster">点击开团</view>
					</view>
				</view>
				
				<view class="heart" style="position: absolute;left: -10rpx;bottom: -120rpx;">
					<image src="/static/images/heart-collect.png" style="width: 200rpx;"  mode="widthFix"></image>
				</view>
			</view>
			
			<!-- 活动四 -->
			<view class="activity-title">
				<image src="/static/images/activity-4.png" style="width: 80%;" mode="widthFix"></image>
			</view>
			<view class="activity activity-four">
				<view class="award">
					<view class="award-item grid">
						<image src="/static/images/iphone.png"  mode="widthFix"></image>
						<image src="/static/images/free.png" style="width: 40%;" mode="widthFix"></image>
					</view>
					<view class="award-item">
						<image src="/static/images/bed.png"  mode="widthFix"></image>
					</view>
					<view class="award-item">
						<image src="/static/images/car.png"  mode="widthFix"></image>	
					</view>
					<view class="award-item">
						<image src="/static/images/money.png"  mode="widthFix"></image>
					</view>
					<view class="rule-bg award-tips">
						新老用户下单即可参与<text class="yellow">幸运大转盘</text>，邀请新用户注册和平台下单均可额外获得抽奖机会1次
					</view>
				</view>
				<view class="text">
					<view>
						温馨提示：
					</view>
					<view>
						1.2025年2月5日～3月14日在貂蝉到家平台单笔或累计下单超过500元的客户添加客服微信，凭借消费记录截图参与三部IPHONE16抽奖，具体时间和入口由企业客服微信通知。
					</view>
					<view style="margin-top: 10rpx;">
						2.其他奖品凭消费记录，添加企业客服微信进行返还。房费抵扣劵最高500元，车费免抵券最高100元。
					</view>
				</view>
				<view class="share">
					<view class="share-btn yellow" style="padding: 20rpx 40rpx;">
						<view style="margin-top: -10rpx;" @click="toDetail">立即免费抽奖</view>
					</view>
				</view>
				
				<view class="heart-2" style="position: absolute;right: -30rpx;bottom: -120rpx;">
					<image src="/static/images/heart.png" style="width: 200rpx;"  mode="widthFix"></image>
				</view>
			</view>
			
			<!-- 二维码 -->
			<view class="activity qrcode">
				<view class="code">
					<view>
						<image src="/static/images/kf_weixin.png" style="width: 200rpx;" mode="widthFix"></image>
						<text>客服微信</text>
					</view>
					
					<view class="share">
						<view class="share-btn yellow" style="padding: 20rpx 40rpx;">
							<view style="margin-top: -10rpx;color: yellow;font-weight: 300;font-size: 42rpx;" @click="placeOrder">立即下单</view>
						</view>
					</view>
				</view>
				
				<view class="tips">
					活动咨询电话：13101256555
				</view>
				<!-- <view class="balloon-2" style="position: absolute;right: -10rpx;bottom: -60rpx;">
					<image src="/static/images/balloon.png" style="width: 130rpx;"  mode="widthFix"></image>
				</view> -->
			</view>
			
		</view>
		
		<view class="main-heart">
			<image src="/static/images/heart.png" style="width: 500rpx;"  mode="widthFix"></image>
		</view>
		
		<!-- 分享海报 -->
		<poster ref="posterRef" @onInit="login"></poster>
		<!-- 余额 -->
		<cash-withdrawal ref="cashWithdrawalRef" @onLogin="login"></cash-withdrawal>
		<!-- 倒计时金额 提现 -->
		<countdown ref="countdownRef" @onCash="onCashHandler"></countdown>
	</view>
</template>

<script>
	import countdown from '../../components/countdown.vue';
	import poster from '../../components/poster.vue';
	import cashWithdrawal from '../../components/cash_withdrawal.vue';
	export default {
		components: {
			poster,
			countdown,
			cashWithdrawal
		},
		data() {
			return {
				title: 'Hello',
				config: undefined,
				openid: undefined,
				width: 0,
				friendList: [],
				innerAudioContext: null,
				isPalay: true
			}
		},
		onLoad(option) {
			this.init(option)
		},
		mounted() {

		},
		methods: {
			login(){
				// 重新登陆
				uni.clearStorageSync()
				this.getConfig().then(res=>{
					this.wxlogin(res, 0)
					console.log('wxlogin');
				})
			},
			init(option){
				if(!this.is_weixn()){
					uni.clearStorageSync()
				}
				try{
					this.config = JSON.parse(uni.getStorageSync('config'))
				} catch{
					console.log('----');
				}
				
				this.openid = uni.getStorageSync('openid')
				if(!this.openid){
					if(!this.config){
						this.getConfig().then(res=>{
							let pid = option.tpid
							pid = pid?pid:0
							uni.setStorageSync('tpid', pid)
							this.wxlogin(res, pid)
						})
					}
					if(option.code){
						let pid = uni.getStorageSync('tpid')
						pid = pid?pid:0
						this.getwxcode(option.code, pid)
					}
				}else{
					this.getJoinedFriends()
					this.playMusic()
				}
			},
			playMusic(){
				// 播放音乐
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.loop = true;
				this.innerAudioContext.src = 'https://diaocangdaojia.oss-cn-beijing.aliyuncs.com/music/music.mp3';
				this.innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
			},
			changeMusic(){
				if (this.innerAudioContext.paused) {
					this.isPalay = true
				    this.innerAudioContext.play()
				} else {
					this.isPalay = false
				   this.innerAudioContext.pause()
				}
			},
			toDetail(){
				uni.navigateTo({
					url: "/pages/turntable/index"
				})
			},
			placeOrder(){
				location.href = "https://app.diaochan88.com/h5/"
			},
			getwxcode(code,pid){
				this.$comm.http('/api/activelove/login',{code,pid}).then(res=>{
					uni.setStorageSync('openid', res.msg.openid)
					uni.redirectTo({
						url: '/'
					})
				});
			},
			wxlogin(config, pid){
				let url = `${location.protocol}//${location.host}/active/214/#/?tpid=${pid}`
				const redirect_url2 = 'https://app.diaochan88.com' + '/api/wechat/jump?url=' + encodeURIComponent(url);
				location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appId}&redirect_uri=${encodeURIComponent(redirect_url2)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
			},
			getConfig(){
				return new Promise((resolve,reject)=>{
					this.$comm.http('/api/activelove/getSignpPackage').then(res=>{
						uni.setStorageSync('config', JSON.stringify(res.data))
						resolve(res.data)
					})
				})
			},
			getUserInfo(){
				this.$comm.http('/api/activelove/user_info', {openid: this.openid}, "POST").then(res=>{
					uni.setStorageSync('userinfo', JSON.stringify(res.data))
				})
			},
			// 分享二维码
			sharePoster(){
				this.$refs.posterRef.open(this.openid)
			},
			// 领取优惠券
			getCoupon(){
				this.$comm.http('/api/activelove/fetch_coupon', {openid: this.openid}).then(res=>{
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 2000
					})
				})
			},
			onCashHandler(){
				this.$refs.cashWithdrawalRef.open(this.openid)
			},
			// 4人成团
			getJoinedFriends(){
				this.$comm.http('/api/activelove/get_joined_friends', {openid: this.openid}).then(res=>{
					if(res.code === 404){
						this.login()
					}
					this.friendList = res.data
				})
			},
			is_weixn(){
				var ua= navigator.userAgent.toLowerCase();
				if(ua.match(/MicroMessenger/i)=="micromessenger"){
					return true;
				}else{
					return false;
				}
			}
		}
	}
</script>

<style lang="scss">
	@import url("../../styles/index.scss");
</style>
